<template>
  <div class="head">
    <div class="center nav">
      <p style="font-size: 1.5em;color: #fff;font-family: Vineta BT;">BLOG</p>
      <nav style="display: flex; align-items: center;">
        <li><el-link @click="router.push('/theme')">主页</el-link></li>
        <li>   
          <el-link type="primary" size="large" underline="never" 
          @click="router.push('/users')"
          >用户列表</el-link>
        </li> 
        <li><el-link>你哈</el-link></li>
        <li><el-link>你哈</el-link></li>
      </nav>
      <div>
        <el-link @click="router.push('/user/info?id='+currentUser.id)">
          <el-avatar v-if="currentUser != null"> {{ currentUser.username }}        
          </el-avatar>
        </el-link>
        <p v-if="currentUser == null">
          <el-link type="primary" size="large" @click="router.push('/user/login')">
            登录
          </el-link> 
          |
          <el-link type="primary" size="large">
            注册
          </el-link>
        </p>
      </div>
    </div>
  </div>
  <div class="search">
    <div class="center search_bar">
        <el-text style="color: #fff; font-size: 1.2em;">技术文档</el-text>
        <div style="display: flex;align-items: center;">
          <el-text></el-text>
          <el-input placeholder="请搜索……"></el-input>
          <el-icon size="1.5em" color="#fff"><Search /></el-icon>
        </div>
    </div>
  </div>
  <main>
    <div class="center">
       <div class="contanier">
        <div class="articles">
          <router-view />
        </div>
        <div class="users">
          <el-scrollbar  height="83vh"  @end-reached="handlerEnd()">
               <el-timeline>
                   <el-timeline-item v-for="(action,index) in actionArray"
                    :timestamp="action.createTime">
                      <el-text type="primary">{{ action.username }}</el-text>
                       <el-text type="primary">{{ action.message }}</el-text>
                   </el-timeline-item>
                </el-timeline>
            </el-scrollbar>
        </div>
       </div>
    </div>
  </main>
</template>

<script setup>
import router from '@/router';
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

onMounted(()=>{
  loadAction();
  getUser();
});

//自定义变量保存用户数组
const actionArray = ref([]);

function loadAction() {
  axios.get(BASE_URL+'/v1/user/action')
  .then((response)=>{
    if (response.data.code == 0) {
      actionArray.value = response.data.data;
    }
    else {
      ElMessage.error('失败的宇宙');
    }
  });
};

const currentUser = ref({});

function getUser() {
  currentUser.value = JSON.parse(localStorage.getItem('user'));
}

function handlerEnd(direction) {
    console.log('当前方向是:',direction);
    ElMessage.info('到底了，笨蛋');
}

setInterval(()=>{loadAction()},1000)
</script>


<style>
.head {
  width: 100vw;
  height: 10vh;
  background-color: var(--header-color);
}

.center {
  height: 100%;
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav {
  background-color: var(--header-color);
}

.search {
  height: 7vh;
  width: 100%;
  background-color: var(--headerbottom-color);
}

.search_bar {
  background-color: var(--headerbottom-color);
}

main  {
  height: 100%;
  width: 100%;
  background-color: #000;
}

.contanier {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10%;
}

.users {
  width: 40%;
  padding: 20px;
}

.articles {
  width: 60%;
}


.user_card {
  height: auto;
  padding: 20px;

  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10%;
  border: 1px solid #fff;
}


</style>